<template>
	<view class="">
		<view class="header">
			<view class="header_box">
				<img class="header-icon" :src="getimg('myperson.png')"></img>
				<view class="header-txt">
					<p class="header-t1">填写您的投诉原因</p>
					<p class="header-t2">我们将尽快为您解决</p>
				</view>
			</view>	
		</view>
		<view>
			<view class="info" style="border-bottom: 1px solid rgba(241, 241, 241, 1);">
				<view class="title" style="width: 30%;">
					<text>手机号</text>
				</view>
				<view class="ipts">
					<view class="info-right">
						<input type="text" name="phone" placeholder="输入手机号，方便联系您!" v-model="phone" cursor-spacing="40" />
					</view>
				</view>
			</view>
			<view class="info">
				<view class="title">
					<text>投诉内容</text>
				</view>
				<view class="content">
					<textarea name="content" placeholder="输入具体的投诉内容" v-model="content" cursor-spacing="40" /></textarea>
				</view>
			</view>
			<view class="info">
				<view class="title">
					<text>投诉图片上传</text>
				</view>
				<view class="imgs">
					<view class="imgs-item" v-for="(ind, el) in imgs">
						<img :src="el">
					</view>
					<view class="imgs-item" @click="addPic()">
						<img style="width:45%;height:45%;padding:28%" :src="getimg('icon-sctupian.png')">
					</view>
				</view>
			</view>
			
			<view class="info" v-if="!canRecord">
				<view class="title">
					<text>举证录音</text>
					<text class="tip">（最多录制一分钟）</text>
				</view>
				<view class="content luying">
					<view class="voice-time">
						<audio id="audio" :src="audiourl"></audio>
						<view @click="playVoice" v-if="isplay" class="v-t3">{{formatedRecordTime+'″'}}</view>
						<view @click="playVoice" id="playlength" v-if="!isplay" class="v-t1" ></view>
						<view @click="clearaudio" class="v-t2"><img :src="getimg('icon-shanchu.png')"></view>
					</view>
					<view id="bt_recoding" class="voice-button">
						<img :src="getimg('buy_luying2.png')" alt="">
					</view>
				</view>
			</view>
			<view class="info2">
				<button @click="formSubmit()">提交投诉</button>
			</view>
		
			<!-- 中间黑框 录音状态 -->
			<view class="blackBoxSpeak">
				<p class="blackBoxSpeakConent">手指上划，取消发送</p>
			</view>
		
			<!-- 中间黑框 暂停状态 -->
			<view class="blackBoxPause">
				<p class="blackBoxPauseContent" style="background: red">松开手指， 取消发送</p>
			</view>
		
		</view>
	</view>
</template>

<script>
	var web=require('../../components/js/request.js');
	var jweixin = require('jweixin-module');
	require('../../components/js/jquery.js');
	var playTimeInterval;
	var recordTimeInterval;
	var blackBoxSpeak
	var blackBoxPause
	var bt_recoding;
	//手指移动相关
	var posStart = 0; //初始化起点坐标
	var posEnd = 0; //初始化终点坐标
	var posMove = 0; //初始化滑动坐标
	//轮播相关
	var index = [9, 8, 7, 6, 5, 4, 3, 2, 1, 2, 3, 4, 5, 6, 7, 8, 9];
	var num = index.length;
	
	var timer = null; //用于清除计时器
	function formatTime(time) {
	    if (typeof time !== 'number' || time < 0) {
	        return time
	    }
	    var hour = parseInt(time / 3600)
	    time = time % 3600
	    var minute = parseInt(time / 60)
	    time = time % 60
	    var second = time
	    return ([hour, minute, second]).map(function(n) {
	        n = n.toString()
	        return n[1] ? n : '0' + n
	    }).join(':')
	}
	function formatDate(date) {
	    var year = date.getFullYear()
	    var month = date.getMonth() + 1
	    var day = date.getDate()
	
	    if (date.getHours() >= 19) {
	        day = day + 1;
	    }
	
	    return [year, month, day].map(formatNumber).join('-')
	}
	
	// 计算时间
	function secondToMin(s) {
		var HH = Math.floor(s / 3600);
		var MM = Math.floor(s / 60);
		var SS = s % 60;
		if (HH < 10)
			HH = "0" + HH;
		if (MM < 10)
			MM = "0" + MM;
		if (SS < 10)
			SS = "0" + SS;
		var min = HH + ":" + MM + ":" + SS;
		return min.split('.')[0];
	}
	export default{
		data(){
			return{
				title: '', //标题
				content: '', //内容
				phone: '', //手机
				imgs: [], //图片
				canRecord: false, //是否允许录音
				recording: false, //是否正在录音
				hasRecord: false, //是否有录音
				recordTime: 0, //录音时间
				formatedRecordTime: '00:00:00',
				userInfo: {},
				audiourl:'',
				isplay:true,
			}
		},
		onLoad() {
			
		},
		onReady() {
			//录音按钮
			bt_recoding = document.getElementById("bt_recoding");
			//中间黑色边框和里面的内容（录音状态）
			blackBoxSpeak=document.querySelector(".blackBoxSpeak")
			this.initEvent();
			// this.setTimer();
			this.userAgent();
		},
		methods:{
			getimg(url){
				return 'http://newmap.tour-ma.com/r/cms/www/newmap/newmap/'+url
			},
			userAgent:function(){
				//判断是否在微信环境中
				var ua = navigator.userAgent.toLowerCase();
				if (ua.match(/MicroMessenger/i) == "micromessenger") {
					console.log('微信环境内')
					//配置微信参数
					this.configWX();
				}
			},
			//配置微信
			configWX: function() {
				var url = "/getwechat/access_token.jspx";
				var arg = {
					url: location.href.split('#')[0]
					// url:'http://newmap.tour-ma.com/'
				};
				var that=this;
				web.httpPost(that,url,arg,function(res){
					if (res.data.status == 200) {
						jweixin.config({
							debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
							appId: res.data.appId, // 必填，公众号的唯一标识
							timestamp: Number(res.data.timestamp), // 必填，生成签名的时间戳
							nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
							signature: res.data.signature, // 必填，签名
							jsApiList: ['chooseImage','startRecord','uploadImage','uploadVoice','stopRecord'] // 必填，需要使用的JS接口列表
						});
						jweixin.ready(function() {
							// alert('成功')
							// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
						});
						jweixin.error(function(res) {
							console.log(res);
							alert("微信授权失败，不能正确的获取你的位置");
							// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
						});
					} else {
						alert("微信授权失败，不能正确的获取你的位置");
					}
				})				
			},
			addPic: function () {
				console.log('上传图片')
				if (this.imgs.length >= 9) {
				
				} else {
					jweixin.chooseImage({
						count: 1, // 默认9
						sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
						success: function (res) {
							var localIds = res.datalocalIds; 
							this.upImg(localIds[0]);
						},
						fail: function (e) {
							console.log(e)
						}
					})
				}
			},
			upImg: function (imgpath) {
				jweixin.uploadImage({
					localId: imgpath,
					success: function (res) {
						var url = "/weixin/tupian.jspx";
						var arg = {media_id:res.dataserverId};
						var that=this;
						web.httpPost(that,url,arg,function(res){
							if(data.status == 200){
								var videoimg = data.data+'.jpg';
								var tmp = this.imgs;
								tmp.push(videoimg);
								this.imgs=tmp;
							}else{
								console.log('上传失败')
							}
						})
					}
				})
			},
			initEvent() {
				var that=this;
				bt_recoding.addEventListener("touchstart", function (event) {
					event.preventDefault();//阻止浏览器默认行为
					posStart = 0;
					posStart = event.touches[0].pageY;//获取起点坐标
				
					//显示录音 隐藏暂停
					that.showBlackBoxSpeak();
				});
				bt_recoding.addEventListener("touchmove", function (event) {
					event.preventDefault();//阻止浏览器默认行为
				
					posMove = event.targetTouches[0].pageY;//获取滑动实时坐标
					if (posStart - posMove >= 200) {
						//隐藏录音 显示暂停
						that.showBlackBoxPause();
						
					} 
				});
				bt_recoding.addEventListener("touchend", function (event) {
					event.preventDefault(); //阻止浏览器默认行为
					posEnd = 0;
					posEnd = event.changedTouches[0].pageY;//获取终点坐标
					that.initStatus();
				});
			},
			//轮播
			setTimer() {
				timer = setInterval(function () {
					setTimeout(function () {
						num++;
						blackBoxSpeak.style.background = "url('http://newmap.tour-ma.com/r/cms/www/newmap/newmap/ic_record@2x.png') no-repeat 28px 16px/64px 104px, url('/r/cms/www/newmap/newmap/ic_record_ripple@2x-" + index[num] + ".png') no-repeat 111.2px 32px/28.8px 88px";
					}, 100);
					if (num >= index.length - 1) {
						num = 0;
					}
				}, 100);
			},
			//初始化状态
			initStatus() {
				bt_recoding.value = '按住 说话';
				//全部隐藏
				this.showBlackBoxNone();
			},
			//显示录音 隐藏暂停
			showBlackBoxSpeak() {
				if(this.audiourl!=''){
					this.audiourl='';
					this.formatedRecordTime= formatTime(0);
					this.recording=true;  //标识正在录音
					this.hasRecord= false;
					this.isplay=true;
				}
				this.startRecord();
				bt_recoding.value = '松开 结束';
				blackBoxSpeak.style.display = "block";
				blackBoxPause.style.display = "none";
				
			},
					
			//隐藏录音 显示暂停
			showBlackBoxPause() {
				bt_recoding.value = '松开手指，取消发送';
				blackBoxSpeak.style.display = "none";
				blackBoxPause.style.display = "block";
				this.stopRecordUnexpectedly();
			},
					
				//隐藏录音
			showBlackBoxNone() {
				this.stopRecord();
				blackBoxSpeak.style.display = "none";
				blackBoxPause.style.display = "none";
			},
			
			//开始录音
			startRecord: function () {
				this.setTimer();
				jweixin.startRecord();
				var recordTime=0; //每次加一秒
				var that=this;
				recordTimeInterval = setInterval(function () {
				  recordTime += 1;
				  that.formatedRecordTime= formatTime(recordTime);
				}, 1000); //计时部分
			},
			//结束录音
			stopRecord: function () {
				clearInterval(timer) //重置计时器
				var that=this;
				clearInterval(recordTimeInterval);//暂停计时器
				jweixin.stopRecord({
					complete: function (res) {
						var localId = res.datalocalId;
						that.upVoice(localId);
						that.recording= false;
						that.hasRecord= false;
					}
				});
			},
			//预期外的结束
			stopRecordUnexpectedly: function () {
				var that=this;
				clearInterval(recordTimeInterval) //重置计时器
					jweixin.stopRecord({
					success: function () {
					  that.recording= false;
					  that.hasRecord= false;
					  that.formatedRecordTime= formatTime(0);
					}
				})
			},
			upVoice: function (localId) {
				jweixin.uploadVoice({
					localId: localId, // 需要上传的音频的本地ID，由stopRecord接口获得
					isShowProgressTips: 1, // 默认为1，显示进度提示
					success: function (res) {
						var url = "/weixin/luyin.jspx";
						var arg = {media_id:res.dataserverId};
						var that=this;
						web.httpPost(that,url,arg,function(res){
							if(res.data.status == 200){
								this.audiourl=res.data.data+'.mp3';
							}else{
								console.log('上传失败')
							}
						})
					}
				});
			},
			playVoice(){
				this.isplay=false;
				var audio = document.getElementById("audio");
				console.log(this.audiourl)
				if(this.audiourl != ''){
					if (audio.paused) {
						audio.play();
					} else {
						audio.pause();
					}
					
					playTimeInterval=setInterval(function() {
						var currentTime = audio.currentTime;
						currentTime = Math.floor(currentTime);
						var playTime = formatTime(currentTime);
						console.log(document.getElementById('playlength'))
						document.getElementById('playlength').innerHTML=playTime;
						// this.formatedRecordTime=playTime;
					}, 1000);
				}
			},
			clearaudio(){
				this.isplay=true;
				clearInterval(playTimeInterval) //重置计时器
				this.audiourl='';
				this.formatedRecordTime=formatTime(0);
				console.log(document.getElementById('playlength'))
				document.getElementById('playlength').innerHTML=this.formatedRecordTime;
			},
			//上传
			formSubmit: function (e) {
				var url = "complaint/submit.jspx";
				var arg = {
					title: this.phone,
					content: this.content,
					phone: this.phone,
					imgs: this.imgs,
					audio: this.audiourl
				};
				var that=this;
				web.httpPost(that,url,arg,function(res){
					uni.showToast({
						title: '提交成功'
					});
				})
			} 
		}
	}
</script>

<style>
	* {
		margin: 0;
		padding: 0;
	}
	
	html,
	body {
		background: #fff;
	}
	
	.btn {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 60px;
		background: #eee;
	}
	
	.btn input {
		width: 100%;
		height: 100%;
		font: 20px/60px 'microsoft yahei';
	}
	
	.blackBoxSpeak {
		width: 176px;
		height: 176px;
		position: absolute;
		left: 0;
		right: 0;
		top: 45%;
		bottom: 0;
		margin: auto;
		background: url("http://newmap.tour-ma.com/r/cms/www/newmap/newmap/ic_record@2x.png") no-repeat 28px 16px/65px 104px,
			url("http://newmap.tour-ma.com/r/cms/www/newmap/newmap/ic_record_ripple@2x-9.png") no-repeat 111.2px 32px/28.8px 88px;
		background-color: rgba(0, 0, 0, .7);
		display: none;
		border-radius: 12px;
	}
	
	.blackBoxSpeakConent {
		font: 14.4px '微软雅黑 Light';
		position: absolute;
		left: 0;
		right: 0;
		bottom: 12px;
		display: block;
		text-align: center;
		width: 90%;
		padding: 8px 0;
		margin: auto;
		color: #ffffff;
		font-weight: 200;
		border-radius: 4px;
	}
	
	.blackBoxPause {
		width: 176px;
		height: 176px;
		position: absolute;
		left: 0;
		right: 0;
		top: 45%;
		bottom: 0;
		margin: auto;
		background: url("http://newmap.tour-ma.com/r/cms/www/newmap/newmap/ic_record@2x.png") no-repeat 28px 16px/65px 104px,
			url("http://newmap.tour-ma.com/r/cms/www/newmap/newmap/ic_record_ripple@2x-9.png") no-repeat 111.2px 32px/28.8px 88px;
	
		background-color: rgba(0, 0, 0, .7);
		display: none;
		border-radius: 12px;
	}
	
	.blackBoxPauseContent {
		font: 14.4px '微软雅黑 Light';
		position: absolute;
		left: 0;
		right: 0;
		bottom: 12px;
		display: block;
		text-align: center;
		width: 90%;
		padding: 8px 0;
		margin: auto;
		color: #ffffff;
		font-weight: 200;
		border-radius: 4px;
	}
	body{
	    margin:0;
	}
	.header {
	    width: 100%;
	    height: 125px;
	    background: url('http://newmap.tour-ma.com/r/cms/www/newmap/newmap/bg_head.png') no-repeat;
	    background-size: 100%;
	    position: relative;
	}
	.header_box{
	    background: rgba(255,255,255,1);
	    box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.08);
	    border-radius:10px;
	    position:  absolute;
	    width: 84%;
	    top: 22%;
	    left: 4%;
	    padding: 4%;
	    border: 1px solid rgba(0, 0, 0, 0.08);
	}
	.header-icon {
	    width: 60px;
	    height: 60px;
	    display:  inline-block;
	    margin: auto 7%;
	}
	
	.header-icon img {
	    width: 100%;
	    height: 100%;
	    border-radius: 50%;
	}
	
	.header-txt {
	    width: 65%;
	    font-size: 15px;
	    text-align: left;
	    display:  inline-block;
	}
	.header-txt .header-t1{
	    font-size: 22px;
	    font-family:Microsoft YaHei;
	    font-weight:400;
	    color: rgba(20, 20, 20, 1);
	    margin: 0 0 5% 0;
	}
	.header-txt .header-t2{
	    font-size: 15px;
	    font-family:Microsoft YaHei;
	    font-weight:400;
	    color:rgba(153,153,153,1);
	    margin: 0 0 2% 0;
	}
	
	.zixun {
	    position: absolute;
	    right: 0px;
	    top: 140px;
	    width: 140px;
	    height: 60px;
	    background: rgba(9, 187, 7, 0.7);
	    border-radius: 25px 0 0 0;
	    text-align: center;
	    color: #fff;
	    font-size: 20px;
	}
	
	.zixun-img {
	    width: 30px;
	    height: 30px;
	    margin: 15px 15px 15px 25px;
	    display: inline-block;
	    float: left;
	}
	
	.zixun-txt {
	    height: 40px;
	    margin: 10px 0;
	    line-height: 40px;
	    display: inline-block;
	    float: left;
	}
	
	.top-contact {
	    width: 100%;
	    height: 100%;
	    color: #000000;
	    overflow: hidden;
	    position: absolute;
	    opacity: 0;
	    top: 0;
	    left: 0;
	}
	
	.top-contact contact-button {
	    width: 25%;
	    height: 50%;
	}
	
	.info {
	    width: 84%;
	    position: relative;
	    margin: 1% 0 0 8%;
	    background: #FFFFFF;
	    font-size: 14px;
	    cursor: pointer;
	}
	
	.info .title {
	    position: relative;
	    display:  inline-block;
	}
	
	.info .imgl {
	    width: 18px;
	    height: 18px;
	    line-height: 28px;
	    float: left;
	    margin: 10px 5px 10px 10px;
	    vertical-align: middle;
	    text-align: center;
	}
	
	.info .title text {
	    color: rgba(136, 136, 136, 1);
	    font-size: 15px;
	    line-height: 18px;
	    margin: 10px 0px;
	    display: inline-block;
	    font-weight: 600;
	    letter-spacing: 1.5px;
	}
	
	.info .content {
	    position: relative;
	    color: #888888;
	    font-size: 12px;
	    line-height: 15px;
	    padding-top: 10px;
	}
	
	.info .luying {
	    height: 50px
	}
	
	.info .ipts {
	    position: relative;
	    display: inline-block;
	    width: 70%;
	}
	
	.info .ipts_content {
	    position: relative;
	    display: flex;
	}
	
	.ipts .info-left,
	.ipts_content .info-left {
	    margin: 0 10px;
	    height: 40px;
	    color: rgba(51, 51, 51, 1);
	    font-size: 15px;
	    line-height: 40px;
	    display: inline-block;
	    width: 20%;
	}
	
	.ipts_content .info-left {
	    height: 40px;
	    line-height: 40px;
	}
	
	.ipts .info-right {
	    height: 40px;
	    color: #000000;
	    font-size: 14px;
	    line-height: 40px;
	    display: inline-block;
	    width: 100%;
	}
	
	.ipts input {
	    width: 95%;
	    cursor: pointer;
	    color: rgba(51, 51, 51, 1);
	    /* font-size: 17px; */
	    border-bottom: 1px solid #A0A0A0;
	    background-color: transparent;
	    display: inline-block;
	    border: none;
	    padding: 5% 3%;
	    text-align: right;
	    font-weight: 600;
	}
	.ipts input::-webkit-input-placeholder { /* WebKit browsers */
	  color: rgba(169, 169, 169, 1);
	  font-weight: 500;
	}
	
	.content textarea {
	    height: 100px;
	    width: 90%;
	    cursor: pointer;
	    color: #333333;
	    font-size: 14px;
	    line-height: 17px;
	    text-align: left;
	    display: inline-block;
	    padding: 3% 5%;
	    background: RGBA(247, 244, 248, 1);
	    border: 1px solid rgba(241,241,241,1);
	    border-radius: 10px;
	}
	.content textarea:focus {
	    outline:  none;
	}
	.content textarea::-webkit-input-placeholder { /* WebKit browsers */
	  color: rgba(169, 169, 169, 1);
	  font-weight: 600;
	  letter-spacing:2px;
	}
	
	.ipts button {
	    width: 100px;
	    cursor: pointer;
	    color: #FFFFFF;
	    font-size: 14px;
	    line-height: 25px;
	    margin: 7.5px 10px 7.5px 0;
	    padding: 5px;
	    text-align: center;
	    border: 0px;
	    border: 1px solid #2fb3ff;
	    background-color: #2fb3ff;
	    display: inline-block;
	    position: absolute;
	    right: 0px;
	    z-index: 101;
	}
	
	.ipts .button-hover {
	    width: 100px;
	    cursor: pointer;
	    color: #2fb3ff;
	    font-size: 14px;
	    line-height: 25px;
	    margin: 7.5px 10px 7.5px 0;
	    padding: 5px;
	    text-align: center;
	    border: 0px;
	    border: 1px solid #2fb3ff;
	    background-color: transparent;
	    display: inline-block;
	    position: absolute;
	    right: 0px;
	    z-index: 101;
	}
	
	.info .imgs {
	    width: 100%;
	    position: relative;
	    padding: 0 0 10px 0;
	}
	
	.imgs-item {
	    width: 75px;
	    height: 75px;
	    margin: 0 7px 0 0;
	    display: inline-block;
	    overflow: hidden;
	    background: RGBA(247, 244, 248, 1);
	    border-radius:10px;
	}
	.imgs-item:nth-child(4n) {
	    margin: 0;
	}
	
	.imgs-item img {
	    width: 100%;
	    height: 100%;
	}
	
	.info2 {
	    position: relative;
	    border-top: 1px solid rgba(227, 227, 227, 1);
	    display: flex;
	    margin-top: 35%;
	    background: rgba(242, 242, 242, 1);
	}
	
	.info2 button {
	    width: 84%;
	    cursor: pointer;
	    color: #FFFFFF;
	    font-size: 14px;
	    line-height: 16px;
	    padding: 12.5px 30px 12.5px 30px;
	    margin: 25px auto;
	    text-align: center;
	    border: none;
	    display: inline-block;
	    background: RGBA(51, 109, 242, 1);
	    border-radius:44px;
	}
	
	.info2 .button-hover {
	    width: 355px;
	    cursor: pointer;
	    color: #FF6600;
	    font-size: 14px;
	    line-height: 16px;
	    padding: 12.5px 30px 12.5px 30px;
	    margin: 15px 10px 25px 10px;
	    text-align: center;
	    border: 1px solid #FF6600;
	    background-color: transparent;
	    display: inline-block;
	}
	
	.voice-time {
	    width: 100%;
	    line-height: 50px;
	    display: inline-block;
	    text-align: left;
	}
	.voice-time>div{
	    display: inline-block;
	}
	.voice-time .v-t1{
	    background: RGBA(247, 244, 248, 1);
	    border-radius:8px;
	    width: 85%;
	    font-size:  18px;
	    padding: 0 0 0 5%;
	    vertical-align:  middle;
	}
	.voice-time .v-t3{
	    background: RGBA(247, 244, 248, 1);
	    border-radius:8px;
	    width: 85%;
	    font-size:  18px;
	    padding: 0 0 0 5%;
	    vertical-align:  middle;
	}
	.voice-time .v-t3:before{
	    content:'';
	    display:inline-block;
	    background:url('http://newmap.tour-ma.com/r/cms/www/newmap/newmap/icon-shengyin.png') no-repeat;
	    width:20px;
	    height:20px;
	    background-size: 100%;
	    margin-right: 5%;
	}
	.voice-time .v-t1:before{
	    content:'';
	    display:inline-block;
	    background:url('http://newmap.tour-ma.com/r/cms/www/newmap/newmap/icon-shengyin.png') no-repeat;
	    width:20px;
	    height:20px;
	    background-size: 100%;
	    margin-right: 5%;
	}
	.voice-time .v-t2{
	    position:  absolute;
	    right: 0;
	    height: 22px;
	    width: 22px;
	    top: -55%;
	    line-height:  normal;
	}
	.voice-time .v-t2 img{
	    width:100%;
	    height:100%;
	}
	
	.voice-button {
	    width: 80px;
	    display: block;
	    margin:  auto;
	    position:  relative;
	    height: 80px;
	    background: RGBA(247, 244, 248, 1);
	    border-radius: 50%;
	    margin-top: 20px;
	}
	
	.voice-button img {
	    width: 30px;
	    height: 30px;
	    position:  absolute;
	    top: 50%;
	    left:  50%;
	    margin-left:  -15px;
	    margin-top:  -15px;
	}
	
	.voice-stop {
	    width: 40px;
	    height: 40px;
	    margin: 10px;
	    background-color: #f55c23;
	    border-radius: 50%;
	}
	
	
	.jz-all{/* padding-left:10px; */}
	.tsjyover.juzheng-tp{padding: 10px 0 0 0;}
	.uploadImgname_chuan{overflow:hidden;/* margin-left: 10px; */}
	.uploadImgname_chuan>div{float: left;}
	.zuoping{
		display:  inline-block;
		position:  relative;
		z-index: 100;
		/* margin: 8px; */
	}
	.zuoping .imgcon{
		width:80px;
		height:80px;
	}
	.zuoping .imgcon video{
		width:100%;
		height:100%;
	}
	.zuoping .caocon{
	    position:  absolute;
	    top: 0;
	    right: 0;
	}
	.zuoping .caocon input{
	    border:  none;
	    font-size:  18px;
	    color: #fff;
	    background: rgba(18, 105, 195, 1);
	    border-radius:  50%;
	    padding: 5px;
	    height:  20px;
	    line-height: 10px;
	    position:  absolute;
	    top: 0;
	    right: 0;
	    z-index: 100;
	}
	.xzwebtn{display:none;}
	.uploadFile{width: 80px;height: 66px;z-index: 999;/* margin: 10px 10px 10px 0px; */font-size: 0px;border: 0px;outline: none;opacity: 0;}
	.chuan1 input{border:0px;background-color:transparent;font-size: 0px;outline: none;padding: 0px;margin: 0px;width: 100%;}
	#up_file{display: inline-block;/* width: 80px; *//* height: 80px; *//* margin: 10px 10px 10px 0px; */background: url(/r/cms/www/m/img/icon-sctupian.png) no-repeat center;background-size: 45%;}
</style>
